<template>
	<div class="wbcontent">
		<div v-show="type == 1" class="waterimagedisplay">
			<img src="../../../static/image/bg6401.png" @click="chooseIndex(1)" :class="index == 1 ? 'waterimageselect' : 'waterimage'" />
			<img src="../../../static/image/bg6402.png" @click="chooseIndex(2)" :class="index == 2 ? 'waterimageselect' : 'waterimage'" />
			<img src="../../../static/image/bg6403.png" @click="chooseIndex(3)" :class="index == 3 ? 'waterimageselect' : 'waterimage'" />
		</div>
		<div v-show="type == 2" class="waterimagedisplay">
			<img src="../../../static/image/bg12801.png" @click="chooseIndex(1)" :class="index == 1 ? 'waterimageselect' : 'waterimage'" />
			<img src="../../../static/image/bg12802.png" @click="chooseIndex(2)" :class="index == 2 ? 'waterimageselect' : 'waterimage'" />
			<img src="../../../static/image/bg12803.png" @click="chooseIndex(3)" :class="index == 3 ? 'waterimageselect' : 'waterimage'" />
		</div>
		<div v-show="type == 3" class="waterimagedisplay">
			<img src="../../../static/image/bg19201.png" @click="chooseIndex(1)" :class="index == 1 ? 'waterimageselect' : 'waterimage'" />
			<img src="../../../static/image/bg19202.png" @click="chooseIndex(2)" :class="index == 2 ? 'waterimageselect' : 'waterimage'" />
			<img src="../../../static/image/bg19203.png" @click="chooseIndex(3)" :class="index == 3 ? 'waterimageselect' : 'waterimage'" />
		</div>

		<div style="margin-left: 30px;margin-top: 30px">*****{{ defaultrgb }}*****</div>

		<div class="waterimagedisplay">
			<Input placeholder="Red" v-model="red" style="width: 200px"></Input>
			<Input placeholder="Green" v-model="green" style="width: 200px"></Input>
			<Input placeholder="Blue" v-model="blue" style="width: 200px"></Input>
		</div>
	</div>
</template>

<script>
/*
    static/image/water6402.png
    */

import Vue from 'vue';
import i18n from '../../../static/lang/i18n';

export default {
	name: 'BG',
	data() {
		return {
			type: localStorage.getItem('resolutionType') ? localStorage.getItem('resolutionType') : 1,
			index: 1, //默认选中第一个
			red: 100,
			green: 100,
			blue: 100,
			defaultrgb: null
		};
	},
	methods: {
		chooseIndex(index) {
			this.index = index;
		}
	},
	mounted() {
		// eslint-disable-next-line no-undef
		let Constructor = Vue.extend(module.default);
		let vm = new Constructor({ el: '#appcopy', i18n });
		this.defaultrgb = vm.$t('ivcs.backrgb');
	}
};
</script>

<style scoped>
.waterimagedisplay {
	margin-top: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.wbcontent {
	width: 100%;
	height: 300px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);

	/*display: flex;*/
	/*flex-direction: column;*/
	/*justify-content: center;*/
	/*align-items: center;*/
}

.waterimage {
	width: 200px;
	height: 150px;
	border: 1px solid #eeeeee;
	margin-top: 20px;
}

.waterimageselect {
	width: 200px;
	height: 150px;
	border: 1px solid #3a98ff;
	margin-top: 20px;
}

.waterimage:hover {
	border: 1px solid #3a98ff;
}
</style>
